<template>
  <div class="module_container">
    <div class="module_title "
         flex
    >
      <div class="title_text">实时车辆进出数据</div>
    </div>
    <div class="content">
      <!-- <div flex class="header">
        <div v-for="(item,index) in headerList" :key="index" :style="`width:${item[1]}`">{{ item[0] }}</div>
      </div> -->
      <div flex class="table_box header">
        <div v-for="(item, index) in headerList" :key="index" :style="`width:${item[1]}`">
          {{ headerList1[item[0]] }}
        </div>
      </div>
      <div class="body warning_scroll_layout" style="height:400px">
        <transition-group name="el-zoom-in-top">
          <div v-for="(item, index) in computTableList1"
               :key="index"
               flex=""
               :class="index % 2 ? 'active' : ''"
               class="table_box"
          >
            <div v-for="(subItem, i) in headerList" :key="i + '' + index" class="text_over" :style="`width:${subItem[1]};color:${subItem[0] ==='plateColor'?plateColorsRgb[item.plateColor]:''}`">
              {{ subItem[0] ==='plateColor'?plateColors[item.plateColor]:subItem[0] ==='carType'?plateType[item.carType]:item[subItem[0]] }}
            </div>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>
<script>
import { subscribeEventsFromMQ, getParkingInfos, getVehicleRecords } from '@/api/credit'
import { parkingCodeOptions, plateType, plateColors, plateColorsRgb } from '@/const'
export default {
  data() {
    return {
      headerList1: {
        'plateNo': '车牌号码',
        'plateColor': '车牌颜色',
        'passTime': '通过时间',
        'parkName': '停车场名称',
        'gateName': '出入口名称',
        'laneName': '车道名称',
        'carType': '车辆类型',
        'direct': '过车方向',
        'berthCode': '泊位编号'
        // "inUnid": "weef99jjj91mmm22222"
      },
      headerList: [
        ['plateNo', '200px'],
        ['plateColor', '192px'],
        ['passTime', '300px'],
        ['parkName', '380px'],
        ['gateName', '300px'],
        ['laneName', '200px'],
        ['carType', '125px']
      ],
      tableList: [
        [
          '2020/11/5 15:28',
          '浙A155R5',
          '小型汽车',
          'YS滨江陈列馆停车场',
          '临时车',
          '--',
          '入车'
        ],
        [
          '2020/11/5 15:28',
          '浙A9NB02',
          '小型汽车',
          'YS滨江后河停车场',
          '固定车',
          '7小时21分钟',
          '出车'
        ],
        [
          '2020/11/5 15:27',
          '浙A155R5',
          '小型汽车',
          'YS铁岭关路停车场',
          '固定车',
          '7小时20分钟',
          '出车'
        ],
        [
          '2020/11/5 15:27',
          '贵GUS799',
          '92式民用车',
          'YS西兴街道南停车场',
          '临时车',
          '56分钟',
          '出车'
        ],
        [
          '2020/11/5 15:27',
          '浙H5165L',
          '92式民用车',
          'YS滨江陈列馆停车场',
          '临时车',
          '3小时21分钟',
          '出车'
        ],
        [
          '2020/11/5 15:26',
          '闽DE1F85',
          '92式民用车',
          'YS江陵路滨兴路口停车场',
          '临时车',
          '23分钟',
          '出车'
        ]
      ],
      tableList1: [],
      parkingIndex: 0,
      plateColors,
      plateType,
      plateColorsRgb
    }
  },
  computed: {
    computTableList1() {
      return this.tableList1.slice(0, 20).filter(Boolean).sort((a, b) => new Date(a.passTime) - new Date(b.passTime)).reverse()
    }
  },
  created() {
    // getParkingInfos({ 'pageNo': 1, 'pageSize': 100, parkCode: '10118020617152601000' }).then(res => {

    // })
    // subscribeEventsFromMQ().then(res => {

    // })
    // setInterval()
    this.getVehicleRecords()
    this.timer = setInterval(() => {
      this.parkingIndex = 0
      this.getVehicleRecords()
    }, 30000)
  },
  destroyed() {
    clearInterval(this.timer)		// 退出页面后销毁定时方法
  },
  methods: {
    getVehicleRecords() {
      if (!parkingCodeOptions[this.parkingIndex]) {
        this.tableList1.length = 20
        return
      }
      getVehicleRecords({
        'pageNo': 1,
        'pageSize': 1,
        'startTime': Date.now() - 600000,
        'endTime': Date.now(),
        'parkCode': parkingCodeOptions[this.parkingIndex] }).then(res => {
        if (!res.errorCode) {
          this.tableList1 = [...res.data.list || [], ...this.tableList1]
        }
        this.parkingIndex++
        setTimeout(this.getVehicleRecords, 1000)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.module_container {
  background: url('~@/assets/img_xinyong/module7/list_bg.png') !important;
  background-repeat: no-repeat !important ;
  .content {
    // color:rgb(106,123,146);
    // background: url("~@/assets/img_xinyong/module7/list_bg.png") no-repeat;
    // background-size:100% 100%;
    // margin-bottom: 10px;
    // border-radius: 12px;
    // overflow: hidden;
    font-size: 28px;
    padding: 30px 40px;
    // .header{
    //   background: url("~@/assets/img_xinyong/module7/list_header_bg.png") no-repeat;
    //   background-size:100% 100%;
    //   height: 72px;
    //   line-height: 72px;
    //   color:#BFDAFF;
    //   padding:0 20px;
    //   box-sizing: border-box;
    // }
    .table_box {
      // padding: 10px 10px;
      height: 68px;
      line-height: 68px;
      padding: 0 20px;
      margin-top: 2px;
    }
    .table_box.active,
    .table_box.header {
      background: url('~@/assets/img_xinyong/module7/item_bg.png') no-repeat;
    }
  }
}
</style>
